<html>
    <head>
        <style>
            body {
                margin: 0;
                display: flex;
            }

            .box {
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                left: 0px;
                view-transition-name: box;
            }

            main {
                width: 600px;
                padding: 100px;
            }

            .b .box {
                left: 100px;
                top: 100px;
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <main>
            <div class="box">0</div>
        </main>
        <script type="module" src="/src/inc.js"></script>
        <script type="module">
            const { press, animateView } = window.MotionDOM
            const { scroll, spring, delay } = window.Motion

            let state = "a"

            const increment = (value) => {
                const box = document.querySelector(".box")
                box.textContent = parseInt(box.textContent) + 1
            }

            const update = (newState) => () => {
                document.body.classList.remove(state)
                state = newState
                console.log("setting state", newState)
                increment()
                document.body.classList.add(state)
            }

            async function runAnimation(newState, interrupt = "wait") {
                return animateView(update(newState), {
                    type: spring,
                    visualDuration: 1,
                    bounce: 0,
                })
            }

            runAnimation("b")
        </script>
    </body>
</html>
